<template>
  <div ref="item" class="easy-container no-data">{{ label }}</div>
</template>

<script>
export default {
  name: 'window-bottom-load', // 窗口触底加载
  props: {
    loading: Boolean,
    loadingLabel: {
      type: String,
      default: '正在加载...',
    },
    noMore: Boolean,
    noMoreLabel: {
      type: String,
      default: '没有更多了',
    },
  },
  data() {
    return {
      io: null,
    };
  },
  computed: {
    label() {
      if (this.loading) return this.loadingLabel;
      else if (this.noMore) return this.noMoreLabel;
      return '下拉加载更多';
    },
  },
  created() {
    this.io = new IntersectionObserver((items) => {
      if (this.loading || this.noMore || items[0].intersectionRatio <= 0) return;
      this.$emit('load');
    });
  },
  mounted() {
    this.io.observe(this.$refs.item);
  },
  beforeDestroy() {
    this.io.disconnect();
  },
};
</script>

<style></style>
